<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定内联样式</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="second">
            <div class="row">
                <div class="col-4">
                    <input type="text" v-model="fontColor">
                </div>
                <div class="col-4">
                    <input type="text" v-model="border">
                </div>
                <div class="col-4">
                    <input type="text" v-model="fontSize">
                </div>
            </div>
            <!-- v-bind 用于为 HTML 元素绑定属性(attribute)值 -->
            <div v-bind:style="inlineStyle">{{datetime}}</div>
            <!-- 这里的 style 即为 div 元素的属性(attribute) -->
            <div :style="inlineStyle">{{datetime}}</div>
            <hr>
            <p>对象语法</p>
            <div :style="{color: fontColor , border: border , fontSize: fontSize}">{{datetime}}</div>
            <p>数组语法</p>
            <div :style="[baseStyles, moreStyles]">{{datetime}}</div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        fontColor: 'blue',
                        border: '1px solid green' ,
                        fontSize: '16px',
                        datetime: new Date(),
                        baseStyles: { border: '1px solid gray' , boxShadow: '0 0 5px 4px #dedede inset' },
                        moreStyles: { backgroundColor: 'yellow' }
                    }
                },
                computed: {
                    inlineStyle(){
                        return `color:${this.fontColor}; font-size:${this.fontSize}; border: ${this.border};margin:10px 0`;
                    }
                }
            });

            app.mount( '#second' )
        </script>

    </body>
</html>